<!-- 商品列表 
    从分页组件传了两个事件过来pageChange
-->
<template>
    <div class="main" @scroll.passive="scrollTop($event)">
        <div class="goods-top">
            <el-space wrap :size="10">
                <el-input v-model="goodsSearchData.title" placeholder="输入商品名称" clearable />
                <el-input v-model="goodsSearchData.barcode" placeholder="输入商品条形码" clearable />
                <el-select v-model="goodsSearchData.status" placeholder="选择商品状态"
                    @clear="goodsSearchData.status=undefined" clearable>
                    <el-option label="下架" :value="0">下架</el-option>
                    <el-option label="在售" :value="1">在售</el-option>
                    <el-option label="全部" value="">全部</el-option>
                </el-select>
                <div class="example-block">
                    <el-cascader :options="options" :props="props" clearable v-model="goodsSearchData.categoryId"
                        prop="categoryId" />
                </div>
                <el-button type="primary" :icon="Search" @click="handlrSearch">查找</el-button>
                <el-button type="primary" :icon="Plus" @click="handlrAdd">添加</el-button>
            </el-space>
        </div>
        <div class="goods-table">
            <el-table :data="tableData" border style="width: 100%;">
                <el-table-column type="selection" width="55" />
                <el-table-column type="expand" label="sku信息" width='100'>
                    <template #default="scope">
                        <el-table :data="scope.row.skuList" border style="width: 100%;">
                            <el-table-column prop="barCode" label="商品条码" align="center" />
                            <el-table-column prop="title" label="商品规格" align="center" />
                            <el-table-column prop="stock" label="商品库存" align="center" />
                            <el-table-column prop="originalPrice" label="原价" align="center" />
                            <el-table-column prop="price" label="现价" align="center" />
                            <el-table-column prop="vipPrice" label="VIP价格" align="center" />
                        </el-table>
                    </template>
                </el-table-column>
                <el-table-column prop="id" label="商品ID" align="center" width='80' />
                <el-table-column prop="title" label="名称" align="center" width='500' />
                <el-table-column prop="phone" label="图片" align="center" width='150'>
                    <template #default="scope">
                        <el-popover width="300px" placement="right" :popper-style="'background-color:'+scope.row.color">
                            <template #reference>
                                <el-image style="width: 100px;height: 50px;" :src="scope.row.img" fit="contain" />
                            </template>
                            <template #default>
                                <div style="display: flex;justify-content: center;">
                                    <el-image style="width: 100%; height: 100%" :src="scope.row.img" />
                                </div>
                            </template>
                        </el-popover>
                    </template>
                </el-table-column>
                <el-table-column prop="province" label="商品详细介绍" align="center" width='100'>
                    <template #default="scope">
                        <el-button type="primary" @click="handlrSee(scope.row)">查看</el-button>
                    </template>
                </el-table-column>
                <el-table-column prop="categoryId" label="类目ID" align="center" />
                <el-table-column prop="freightTemplateId" label="邮费模板ID" align="center" />
                <el-table-column prop="sales" label="销量" align="center" />
                <el-table-column prop="unit" label="单位" align="center" />
                <el-table-column prop="status" label="是否在售" align="center">
                    <template #default="scope">
                        <el-tag :type="scope.row.status==0?'warning':'success'">{{scope.row.status==0?'下架':'在售'}}
                        </el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="description" label="描述" align="center" />
                <el-table-column label="操作" align="center" width="200">
                    <template #default="scope">
                        <el-button type="primary" @click="handlrEdit(scope.row)">编辑</el-button>
                        <el-button :type="scope.row.status==0?'primary':'warning'" @click="handlrlowerShelf(scope.row)">
                            {{scope.row.status==0?'在售':'下架'}}</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-dialog v-model="dialogFormVisible" title="商品详情">
                <div class="detail-image" v-html="commodityDetails"></div>
                <el-button @click="dialogFormVisible=false">取消</el-button>
            </el-dialog>
        </div>
        <!-- 分页组件 -->
        <div>
            <Paging v-bind="pagingDatas" @page-change="pageChange"></Paging>
        </div>
        <el-backtop :right="100" :bottom="100" ref="main" target=".main" :visibility-height="0" v-if="bool" />
    </div>
</template>
<script  setup lang="ts">
import { nextTick, reactive, ref, watch } from 'vue'
import { Search, Plus, } from '@element-plus/icons-vue'
import { ClassPagination } from "#/index";
import { get, post } from "@/utils/request";
import Paging from "@/components/paging/Paging.vue";
import { ElMessage, ElMessageBox } from 'element-plus'
import {useRouter} from "vue-router";
let router = useRouter()
const dialogFormVisible = ref(false)
let tableData: TypeGoodsList[] = reactive([]) //商品列表数据
let rollHeight = ref(0)  //滚动距离
let main = ref()  //滚动组件对象的引用
let bool = ref(true)  //用来判断滚动组件的显示隐藏
let commodityDetails = ref([])
let pagingDatas = reactive(new ClassPagination())//分页数据
const options: TypeOptions[] = reactive([])//类目列表
let goodsSearchData = reactive({
    title: '',
    barcode: '',
    status: undefined,
    categoryId: '',
})
let newGoodsSearchData = { ...goodsSearchData }
const props = {
    emitPath: false,
    checkStrictly: true,
    value: 'id',
    label: "title",
    children: "childrenList"
}

//商品列表
function lodeGoodsList() {
    let data = {
        _gp: 'admin.product',
        _mt: 'list',
        categoryId: newGoodsSearchData.categoryId,
        title: newGoodsSearchData.title,
        barcode: newGoodsSearchData.barcode,
        status: newGoodsSearchData.status,
        limit: pagingDatas.limit,
        page: pagingDatas.page,
    }
    get(data).then((res) => {
        console.log(res)
        if (200 == res.errno) {
            tableData.length = 0
            tableData.push(...res.data.items)
            pagingDatas.total = res.data.total
        }else{
            ElMessage.error(res.errmsg)
        }
    })
}


//类目列表
function lodeCategory() {
    if (options.length == 0) {
        let data = {
            _gp: 'admin.category',
            _mt: 'categoryTree',
        }
        get(data).then((res) => {
            console.log(res)
            if (200 == res.errno) {
                options.length = 0
                options.push(...res.data)
                // console.log(options)
            } else {
                ElMessage.error(res.errmsg)
            }
        })
    }
}
lodeCategory()

//分页组件每次调用事件
function pageChange(e: TypePaGing) {
    pagingDatas.page = e._page
    pagingDatas.limit = e._limit
    lodeGoodsList()
    nextTick(() => {
        main.value.$el.click?.()
    })
}
//滚动事件
let scrollTop = (e: Event) => {
    rollHeight.value = Math.floor((e.target as EventTarget).scrollTop)
}
//监听滚动的距离
watch(rollHeight, (val: number) => {
    //    console.log(val);
    bool.value = val > 60
})

//查找
function handlrSearch() {
    Object.assign(newGoodsSearchData, goodsSearchData)
    lodeGoodsList()
}

//添加
function handlrAdd() {
    router.push({name:"AddGoods"})
}

//编辑
function handlrEdit(row: TypeGoodsList) {
    router.push({name:"EditGoods",params:{id:row.id}})
}
//查看
function handlrSee(row: TypeGoodsList) {
    console.log(row)
    dialogFormVisible.value = true
    let data = {
        _gp: 'admin.product',
        _mt: 'detail',
        spuId: row.id
    }
    get(data).then((res) => {
        console.log(res)
        if (200 == res.errno) {
            commodityDetails.value = res.data.detail
            console.log(commodityDetails)
        } else {
            ElMessage.error(res.errmsg)
        }
    })
}
//下架
function handlrlowerShelf(row: TypeGoodsList) {
    let data = {
        _gp: 'admin.product',
        _mt: 'freezeOrActivation',
        spuId: row.id,
        status: row.status == 0 ? 1 : 0
    }
    get(data).then((res) => {
        if (200 == res.errno) {
            ElMessage.success("修改成功")
            lodeGoodsList()
        } else {
            ElMessage.error(res.errmsg)
        }
    })
}

lodeGoodsList()
</script>
<style scoped lang="less">
.goods-top {
    margin: 15px 0px;

    .el-input {
        width: 11vw;
    }
}

.goods-table {
    .detail-image {
        width: 100%;
        text-align: center;

        &::v-deep p {
            width: 100%;
        }

        &::v-deep p img {
            width: 100%;
        }

        &::v-deep img {
            max-width: 100%;
            height: auto;
        }
    }
     :deep(.el-dialog__body) {
            padding-bottom: 5px;
            padding-top: 0px;

        }

        :deep(img) {
            width: 100%;
        }

        :deep(.desc_anchor) {
            // max-width: 100%;
            width: auto;
        }
}
</style>